<{include file="top.html" }>
<script src=" https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>

    wx.config({

        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '<{$wxSign.appId}>', // 必填，公众号的唯一标识
        timestamp: <{$wxSign.timestamp}>, // 必填，生成签名的时间戳
        nonceStr: '<{$wxSign.nonceStr}>', // 必填，生成签名的随机串
        signature: '<{$wxSign.signature}>',// 必填，签名，见附录1
        jsApiList: ["chooseImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

    });

</script>
</head>
<body>
    <div class="bgcolor"></div>
	<div class="content">
        <header><a class="left_link" href="javascript:void(0);" onclick="history.back()"></a>投 稿</header>
        <div id="contribute1">
			<h2><input type="text" placeholder="标题（必填）" /></h2>
            <div class="append_box">
                <canvas id='ca' style="width: 100%;"></canvas>
            	<h3 id="base">选择添加内容</h3>
                <ul>
                	<li id="literal" style="cursor: pointer">
                    	<img src="<{$preStaticUrl}>images/word.png" />
                        <i >文字</i>
                    </li>
                	<li id="photo" style="cursor: pointer">
                    	<img src="<{$preStaticUrl}>images/picture.png" />
                        <i>图片</i>
                    </li>

                    <input type="file"  id="picFile" onchange="readFile(this)" />


                </ul>
            </div>
            <p class="ui-button ui-button-2"><button type="button" onclick="uploadBase64()">确认发布</button></p>
        </div>
    </div>
    <{include file="signBody.html"}>

<script>

$("#literal").on("click",function(){
    $('#base').before("<textarea >asdfasdfasdasdfasdfasdfasdfasdfasdfa</textarea>");
});


    function readFile(obj){
        var file = obj.files[0];
        //判断类型是不是图片
        if(!/image\/\w+/.test(file.type)){
            layer.msg("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){


            var canvas = document.getElementById("ca");


            var image = new Image();
            image.onload = function() {

                var $image=$(image);
                var width=$('.append_box').innerWidth()
                var height=$image.height()*(width/$image.width());
                //$(canvas).height(height);
                //$(canvas).width(width);
                var ctx = canvas.getContext("2d");
                ctx.drawImage(image, 0, 0,width,height);
            };
            image.src = this.result;
            //image.visible=false;
            $('#base').before(image);
            $(image).hide();
        }
    }




$("#photo").on("click",function(){
    wx.chooseImage({
        success: function (res) {
            $.each(res.localIds,function(k,src){
                var img = new Image();
                img.onload = function () {
                    var canvas=document.getElementById('ca');
                   // canvas.width = '400px';
                   // canvas.height = '200px';
                    ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, 400, 100);
                    if (fn) {
                        fn();
                    }
                }

                img.crossOrigin = 'Anonymous';
                img.src = src;
                $(img).css('width','300px');
                //img.style.width="200px";
               // img.width=document.body.width;
                $('#base').before(img);//.before("<canvas id='ca'></canvas>");//

               // var canvas  = document.getElementById("ca");
               // loadImg2Canvas(src,canvas,[canvas.width,canvas.height]);


            });

            //alert(res.localIds[0]); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        }
    });
});

function loaded(){

    var canvas=$('canvas')[0];
    canvas.width = window.width;
    canvas.height = this.height;
    ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);
}

    function uploadBase64(){
        var canvas=$('canvas')[0];
        var dataURL = canvas.toDataURL(type);
        $.post('/part/base64upload', {dataURL: dataURL}, function (ans) {
            if (ans.status) {
                return false;
            }

            $url.val(ans.url);
            $upload.attr('disabled', '');
            $reset.removeAttr('disabled');
        }, 'json');
    }

</script>
    <script src="<{$preStaticUrl}>js/flexible.js"></script>
</body>
</html>

